<template>
  <div id="body-box">
    <div class="box-card">
      <div class="message-container" ref="messageContainer">
        <div
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          :class="message.type"
        >
          <img src="../../assets/default.png" alt="Avatar" class="avatar" />
          <div class="message-content">{{ message.content }}</div>
        </div>
      </div>
      <div class="input-container">
        <input 
          v-model="inputMessage" 
          @keypress.enter="sendMessage" 
          placeholder="输入消息..." 
          ref="input"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      webSocket: null,
      messages: [],
      inputMessage: "",
    };
  },
  methods: {
    showError(msg) {
      alert(msg);
    },
    init(kfId,UserId) {
      if (typeof WebSocket === "undefined") {
        this.showError("您的浏览器不支持 WebSocket");
        return;
      }
      
      console.log("您的浏览器支持 WebSocket");
      const socketUrl = `ws://localhost:8502/websocket/${UserId}/${kfId}`;
      this.webSocket = new WebSocket(socketUrl);

      this.webSocket.onmessage = (res) => {
        const data = res.data;
        this.messages.push({
          type: "received",
          content: data,
          avatar: this.getBasePath() + "/view/im/img/default.png"
        });
        this.scrollToBottom();
      };

      this.webSocket.onerror = (error) => {
        console.error("WebSocket 发生错误:", error);
        // this.showError("WebSocket 发生错误，请稍后再试。");
      };

      this.webSocket.onclose = () => {
        console.log("WebSocket 已关闭，尝试重新连接...");
        // 可以考虑重新连接逻辑
      };

      this.scrollToBottom();
    },
    sendMessage() {
      if (!this.webSocket || !this.inputMessage.trim()) {
        return;
      }
      this.webSocket.send(this.inputMessage);
      this.messages.push({
        type: "sent",
        content: this.inputMessage,
        avatar: "../../assets/default.png"
      });
      this.inputMessage = "";
      this.scrollToBottom();
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    getBasePath() {
      return window.location.origin; // 根据实际情况修改
    },
    scrollToBottom() {
      const container = this.$refs.messageContainer;
      if (container) {
        container.scrollTop = container.scrollHeight;
      }
    },
  },
  mounted() {
    this.init(1,2);
    
  },
};
</script>

<style scoped>
#body-box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  width: 90%;
  min-height: 80vh; /* 添加最小高度 */
  max-height: 80vh;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.message-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  margin-bottom: 60px;
}

.message-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-item.sent {
  align-items: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.message-content {
  max-width: 70%;
  padding: 10px;
  border-radius: 5px;
  background: #ffffff;
}

.message-item.sent .message-content {
  background: #e1f5fe;
}

.input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: #fff;
}

input {
  flex: 1;
  padding: 10px;
  border: 0px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin-right: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}
</style>